<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片左右滚动</title>
<script type="text/javascript" src="jquery/jquery.1.5.2.js"></script>
</head>
<body>
<div id="demo" style="border:1px solid red;overflow:hidden;width:400px;">
    <table align="center" border="0" style="border-collapse;collapse;">
        <tr>
            <!--左侧单元格-->
            <td id="demoLeft" valign="top">
                <table border="0" style="border-collapse;collapse;">
                    <tr align="center">
                        <td><a href="javascript:void(0);"><img src="scroll_image/1.gif" width="100" height="100"></a></td>
                        <td><a href="javascript:void(0);"><img src="scroll_image/2.gif" width="100" height="100"></a></td>
                        <td><a href="javascript:void(0);"><img src="scroll_image/3.gif" width="100" height="100"></a></td>
                        <td><a href="javascript:void(0);"><img src="scroll_image/4.gif" width="100" height="100"></a></td>
                        <td><a href="javascript:void(0);"><img src="scroll_image/5.gif" width="100" height="100"></a></td>
                    </tr>
                </table>
            </td>
            <!--左侧单元格-->
            <!--右侧单元格-->
            <td id="demoRight" valign="top"></td>
            <!--右侧单元格-->
        </tr>
    </table>
</div>
<script type="text/javascript">
function scroll(box,leftBox,rightBox,timer,direction){
    function marqueeLeft(){
        if(demo.scrollLeft()>=demoLeft.width()){
            demo.scrollLeft(0);
        }
        else{
            demo.scrollLeft(demo.scrollLeft()+1);
        }
    }
    function marqueeRight(){
        if(demo.scrollLeft()==0){
            demo.scrollLeft(demoLeft.width());
        }
        else{
            demo.scrollLeft(demo.scrollLeft()-1);
        }
    }
    var demo=$(box);
    var demoLeft=$(leftBox);
    var demoRight=$(rightBox);
    if(direction=="left"){
        var fn=marqueeLeft;
    }
    else if(direction=="down"){
        var fn=marqueeRight;
    }
    demoRight.html(demoLeft.html());
    var temp=setInterval(fn,timer);
    demo.mouseover(function(){
        clearInterval(temp);
    });
    demo.mouseout(function(){
        temp=setInterval(fn,timer);
    });
}

$(document).ready(function(){
    scroll("#demo","#demoLeft","#demoRight",30,"left");
});
/*
5个参数的含义分别如下
1.容器
2.内容容器
3.占位容器
4.时间间隔(单位毫秒)
5.方向(取值left和right)
*/
</script>
</body>
</html>
